<template>
  <div>
    <template v-for="(action, index) in getActions" :key="index">
      <ActionWrap v-if="action.ifShow !== false" v-bind="action" />
    </template>
    <ElDropdown v-if="getDropDownActions.length > 0">
      <ElButton text size="small">
        <template #icon>
          <Icon icon="more"></Icon>
        </template>
      </ElButton>
      <template #dropdown>
        <ElDropdownMenu>
          <template v-for="(action, index) in getDropDownActions" :key="index">
            <ElDropdownItem>
              <ActionWrap v-bind="action" />
            </ElDropdownItem>
          </template>
        </ElDropdownMenu>
      </template>
    </ElDropdown>
  </div>
</template>
<script lang="tsx" setup name="TableAction">
import { computed, PropType } from "vue";
import { ElDropdown, ElButton, ElDropdownMenu, ElDropdownItem, ElPopconfirm, ElTooltip } from "element-plus";
import { Icon } from "@/components/Icon";
import { ActionItem, PopConfirm } from "@/components/Table/type";
import { ElTooltipProps } from "element-plus";
import { isString } from "@/utils/is";
import { omit } from "lodash";
import { useUserStore } from "@/stores/modules/user";

const props = defineProps({
  actions: {
    type: Array as PropType<Partial<ActionItem>[]>,
    default: () => []
  },
  showNum: {
    type: Number,
    default: 2
  }
});
const getActions = computed(() => {
  const userStore = useUserStore();
  let actions = (props.actions || []).filter(
    action =>
      action.ifShow !== false &&
      (!action.auth || userStore.userInfo?.isSuperAdmin || userStore.userInfo?.perms.includes(action.auth))
  );
  if (props.showNum < 0) {
    actions = [];
  } else if (props.showNum > 0) {
    actions = actions.slice(0, props.showNum!);
  }
  return actions;
});
const getDropDownActions = computed(() => {
  let actions = (props.actions || []).filter(action => action.ifShow !== false);
  if (!props.showNum) {
    actions = [];
  } else if (props.showNum > 0) {
    actions = actions.slice(props.showNum!);
  }
  return actions;
});
const getTooltip = (tooltip: string | Partial<ElTooltipProps>): Partial<ElTooltipProps> => {
  if (isString(tooltip)) {
    return {
      content: tooltip
    };
  } else {
    return tooltip;
  }
};
const getPopConfirm = (confirm: Partial<PopConfirm>): Partial<PopConfirm> => {
  return Object.assign({ title: "是否确认删除？" }, confirm);
};

const buttonProps = (action: ActionItem): Partial<ActionItem> => {
  let onClick = null;
  if (action.onClick) {
    onClick = e => {
      if (e.stopPropagation) {
        e.stopPropagation();
      }
      action.onClick?.(e);
    };
  }
  return Object.assign(
    { link: true, size: "small", onClick: onClick },
    omit(action, ["icon", "popConfirm", "tooltip", "onClick"])
  );
};

const ActionWrap = (action: ActionItem) => {
  let button;
  if (action.icon) {
    button = (
      <ElButton {...buttonProps(action)}>
        {{
          icon: () => <Icon icon={action.icon} size="20px"></Icon>,
          default: () => action.label
        }}
      </ElButton>
    );
  } else {
    button = (
      <ElButton {...buttonProps(action)}>
        {{
          default: () => action.label
        }}
      </ElButton>
    );
  }
  let popconfirm;
  let tooltip;
  if (action.popConfirm) {
    popconfirm = (
      <ElPopconfirm {...getPopConfirm(action.popConfirm)}>
        {{
          reference: () => button
        }}
      </ElPopconfirm>
    );
  } else {
    popconfirm = button;
  }
  popconfirm = <span style="margin-right:5px">{popconfirm}</span>;
  if (action.tooltip) {
    tooltip = (
      <ElTooltip {...getTooltip(action.tooltip)}>
        {{
          default: () => popconfirm
        }}
      </ElTooltip>
    );
  } else {
    tooltip = popconfirm;
  }
  return tooltip;
};
</script>
<style></style>
